<script lang="ts">
  import { createEventDispatcher, tick } from 'svelte';
  import type { AssociateArr } from '../types/inputSearch';
  const emit = createEventDispatcher();
  export let associateArr: AssociateArr[] = [];
  export let inputValue: string = '';
  export let selectedIndex: number = 0;
  let associateContianer: HTMLElement | void;
  let top: string = '-160px';
  const highLight = (content: string) =>
    content.replace(
      new RegExp(removeRegInput, 'g'),
      `<span class="high-light">${inputValue}</span>`
    );
  const selectAssociate = (index: number) => {
    emit('selectAssociate', { index });
  };
  const position = () => {
    if (selectedIndex !== -1) {
      tick().then(() => {
        if (associateContianer) {
          const selectedDom: HTMLElement = associateContianer.querySelector('.selected');
          if (selectedDom) {
            associateContianer.scrollTop = selectedDom.offsetTop - 120;
          }
        }
      });
    }
  };

  $: {
    if (associateArr.length < 5) {
      const topNum = 160 - 28 * (5 - associateArr.length);
      top = `-${topNum}px`;
    } else {
      top = '-160px';
    }
  }
  function escapeRegExp(string: string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // 转义特殊字符
  }

  $: removeRegInput = escapeRegExp(inputValue);

  export { position };
</script>

<div class="input-associate" bind:this={associateContianer} style="--top:{top}">
  {#each associateArr as { stockName, stockCode }, index}
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div
      class="input-associate-item {selectedIndex === index ? 'selected' : ''}"
      on:click={selectAssociate.bind(this, index)}
    >
      <span class="name">{@html highLight(stockName)}</span>
      <span class="code">{@html highLight(stockCode)}</span>
    </div>
  {/each}
</div>

<style lang="less">
  .input-associate {
    position: absolute;
    width: 280px;
    max-height: 156px;
    overflow: auto;
    background: #11141d;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    z-index: 1;
    left: 0;
    top: var(--top);
    padding: 8px 0;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      width: 6px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      width: 6px;
      height: 91px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
    }
    &-item {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #f2f2f2;
      letter-spacing: 0;
      line-height: 20px;
      font-weight: 400;
      cursor: pointer;
      &:hover {
        background: rgba(216, 216, 216, 0.1);
      }
      &.selected {
        background: rgba(216, 216, 216, 0.1);
      }
      .name {
        margin-left: 12px;
        margin-right: 6px;
      }
      :global(.high-light) {
        color: #19a0ff;
      }
    }
  }
</style>
